<!-- 表格示例 -->
<template>
  <BaseTable :cols="cols" :rows="rows" style="width: calc(100vw - 600px)" :operateBtns="['edit', 'delete']" @operateBtns="onOperateBtns" :size="size">
    <template #zdy>这是自定义表格列</template>
  </BaseTable>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from "vue";

const props = withDefaults(
  defineProps<{
    _exampleProp?: CommonObj;
  }>(),
  {
    _exampleProp: () => ({}),
  }
);

const cols = [
  { prop: "xm", label: "用户信息", type: "UserInfo" },
  { prop: "xb", label: "性别" },
  { prop: "nl", label: "年龄" },
  { prop: "xx", label: "学校" },
  { prop: "jg", label: "籍贯" },
  { prop: "xjd", label: "现居地" },
  { prop: "ip", label: "IP地址" },
  { prop: "dh", label: "电话" },
  { prop: "zdy", label: "自定义", type: "slot" },
];

const rows = [
  { id: 1, zy: "大家看到", xb: "男" },
  { id: 2, zy: "大家看到", xb: "男" },
  { id: 3, zy: "大家看到", xb: "男" },
  { id: 4, zy: "大家看到", xb: "男" },
];

function onOperateBtns(name: BtnName, row: CommonObj, next: FinallyNext) {
  const { id } = row;
  handleBtnNext(
    {
      edit: () => handleEdit(row, next),
      delete: () => DeleteUserList({ id }).then(() => next()),
    },
    name
  );
}
function handleEdit(row: CommonObj, next: FinallyNext) {
  // 处理编辑操作
}
</script>
<style lang="scss" scoped></style>
